/**
 * Created with JetBrains PhpStorm.
 * User: vander
 * Date: 3/21/13
 * Time: 9:09 PM
 * To change this template use File | Settings | File Templates.
 */
var MyTimer = Class.create({
    initialize: function(o, parentNode, zIndex){
        //o : {id, displayOptions, time{hours, minutes, seconds}}
        //Need : id, displayOptions

        this.id = o.id;

        this.canvas = new Element("canvas", {'id': this.id+"canvas"});
        this.canvas.writeAttribute("width", o.displayOptions.width);
        this.canvas.writeAttribute("height", o.displayOptions.height);

        this.canvas.setStyle({webkitTransform: "rotate(-90deg)"});
        this.ctx = this.canvas.getContext('2d');
        this.ctx.lineWidth = 6;
        this.ctx.strokeStyle = "00EE00";

        this.span = new Element("span", {'id': this.id+"span"});
        this.span.setStyle({position: "absolute", "top": "40%", color :"#0e0",
                            display:"block", width:"100%", textAlign: "center",
                            font: "Arial"});


        this.seconds = o.time.seconds || 6;
        this.sec = this.seconds;

        $(this.span).innerHTML = this.seconds;

        this.divTag = new Element("div", {'id': this.id});
        this.divTag.setStyle({
            backgroundColor: "blue", position: 'absolute', top: o.displayOptions.top + 'px', left: o.displayOptions.left + 'px',
            width: o.displayOptions.width + 'px', height: o.displayOptions.height + 'px'
        });

        this.zIndex = zIndex || 0;
        this.setZIndex(this.zIndex);

        $(this.divTag).insert(this.canvas);
        $(this.divTag).insert(this.span);

        if(parentNode !== undefined){
            $(parentNode).insert(this.divTag);
        }
        else{
            $(document.body).insert(this.divTag);
        }
    },
    start: function(){
        var _this = this;

        var startAngle = 0,
            time = 0;

        this.intv = setInterval(function(){
                var endAngle = (Math.PI * time * 2 / _this.sec);
                _this.ctx.arc(_this.getWidth()/2,
                                _this.getHeight()/2, 35, startAngle, endAngle, false);
                startAngle = endAngle;
                _this.ctx.stroke();

            $(_this.span).innerHTML = _this.seconds--;
            if(++time > _this.sec){
                clearInterval(_this.intv);
            }
            }, 1000);

    },
    stop: function(){},
    setTime: function(time){

        this.seconds = time.seconds;

    },
    update: function () {

    },
    draw: function (parentDiv) {

    },
    setTop: function (t) {
        $(this.divTag).setStyle({ top: t + 'px' });
    },
    getTop: function(){
        return parseInt($(this.divTag).getStyle("top"));
    },
    setLeft: function (l) {
        $(this.divTag).setStyle({ left: l + 'px'});
    },
    getLeft: function(){
        return parseInt($(this.divTag).getStyle("left"));
    },
    setWidth: function(w){
        $(this.canvas).setStyle({ width: w + 'px'});
        $(this.divTag).setStyle({ width: w + 'px'});
    },
    getWidth: function(){
        return parseInt($(this.divTag).getStyle("width"));
    },
    setHeight: function(h){
        $(this.canvas).setStyle({ width: h + 'px'});
        $(this.divTag).setStyle({ height: h + 'px' });
    },
    getHeight: function(){
        return parseInt($(this.divTag).getStyle("height"));
    },
    setZIndex: function(z){
        $(this.divTag).setStyle({zIndex: z});
    },
    getZIndex: function(){
        return parseInt($(this.divTag).getStyle("zIndex"));
    },
    setVisibility: function(t){
        if(t){
            $(this.divTag).setStyle({visibility: "visible"});
        }
        else{
            $(this.divTag).setStyle({visibility: "hidden"});
        }
    },
    isVisible: function(){
        if($(this.divTag).getStyle("visibility") == "visible"){
            return true;
        }
        return false;
    },
    registerEvent: function (o) {
        //o = {type, eventHandler, data}

        this.divTag.observe(o.type, function (event) {
            o.eventHandler(o.data);
        });
    }
});